<template>
  <div class="table_continer">
    <!-- -----------------------------------------------采购明细（设备）表格---------------------------------------------------- -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column label="序号" width="70">
        <template slot-scope="scope">
          <div>{{ scope.$index + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column label="采购编号" width="150">
        <template slot-scope="scope">
          <el-link @click="handledetailed(scope.row.purchaseId)" type="primary">
            {{ scope.row.purchaseDetailVo.purchaseNum || '-' }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="purchaseDetailVo.applicationTime" label="申请时间" show-overflow-tooltip min-width="180" />
      <el-table-column prop="purchaseDetailVo.title" label="采购标题" show-overflow-tooltip min-width="180" />
      <el-table-column label="采购品类" min-width="120">
        <template slot-scope="scope">
          <div>{{ ['设备采购', '物料采购'][scope.row.purchaseDetailVo.type] }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="purchaseDetailVo.applicantName" label="申请人" min-width="120" />
      <el-table-column prop="purchaseDetailVo.desiredDeliveryTime" label="期望供货时间" show-overflow-tooltip
        min-width="160" />
      <el-table-column prop="productName" label="设备名称" min-width="180" />
      <el-table-column prop="model" label="规格型号" show-overflow-tooltip min-width="180" />
      <el-table-column prop="unitName" label="单位" show-overflow-tooltip min-width="180" />
      <el-table-column prop="supplierName" label="供应商" show-overflow-tooltip min-width="180" />
      <el-table-column prop="price" label="单价（元）" min-width="120" />
      <el-table-column label="审核状态" min-width="120">
        <template slot-scope="scope">
          <div :style="'color:' + ['#E6A23C', '#67C23A', '#F56C6C'][scope.row.purchaseDetailVo.auditStatus]">
            <i
              :class="['el-icon-warning', 'el-icon-success', 'el-icon-remove'][scope.row.purchaseDetailVo.auditStatus]" />
            <span>
              {{ ['审核中', '已通过', '已驳回'][scope.row.purchaseDetailVo.auditStatus] }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="验收状态" min-width="120">
        <template slot-scope="scope">
          <span>
            {{ ['已验收', '未验收', '验收中'][scope.row.acceptanceFlag] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="创建部门" align="center" min-width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.deptName || '-' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="创建人" align="center" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.createBy || '-' }}
        </template>
      </el-table-column>
    </el-table>
    <div class="table_continer_pagination">
      <el-pagination :current-page="pageParams.pageNum" background :page-sizes="[10, 20, 50, 100]"
        :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
/** 拉取列表远程方法 ---------------------------------------------------------------------------------------------------------- */
import { listpPrchasea, listpPrchases, status } from '@/api/purchasing/purchasing'
/** ------------------------------------------------------------------------------------------------------------------------- */
import { pageCount } from '@/utils/pagination'
/** 查询参数处理 ---------------------------------------------------------------------------------------------------------- */
function processQueryParams (queryParams, pageParams) {
  const params = Object.assign({}, queryParams, pageParams)
  return params
}
/** ------------------------------------------------------------------------------------------------------------------------- */

export default {
  name: 'PaginationTable',
  data () {
    return {
      pagination: {
        total: 1,
        pageCount: 1
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        /** 列表默认排序字段 ---------------------------------------------------------------------------------------------------------- */
        orderByColumn: 'purchaseEquipmentId',
        /** ------------------------------------------------------------------------------------------------------------------------- */
        isAsc: 'desc'
      },
      queryParams: null,
      tableData: [],
      multipleSelection: []
    }
  },
  mounted () {
    this.refreshList()
  },
  methods: {
    refreshList () {
      const params = processQueryParams(this.queryParams, this.pageParams, this.tabsid)
      console.log('查询参数', params);
      // --------consolelog('查询参数', params)
      listpPrchasea(params).then((res) => {
        console.log('获取列表', res);
        // --------consolelog('获取列表', res)
        this.pagination.total = res.total
        this.pagination.pageCount = pageCount(this.pagination.total, this.pageParams.pageSize)
        this.tableData = res.data
      })
    },
    handleQuery (queryParams) {
      this.queryParams = queryParams
      this.refreshList()
    },
    handleSizeChange (value) {
      this.pageParams.pageSize = value
      this.refreshList()
    },
    handleCurrentChange (value) {
      this.pageParams.pageNum = value
      this.refreshList()
    },
    handleSelectionChange (value) {
      // console.log('handleSelectionChange', value)
    },
    // 点击编号跳转采购单详情-----------------------------
    handledetailed (id) {
      this.$emit('click_create_reception', id)
    },
    /** 传递点击【编辑】事件 ---------------------------------------------------------------------------------------------------------- */
    handleEdit (id) {
      this.$emit('click_edit', id)
    },
  }
}
</script>
<style lang="scss" scoped>
.table_continer {
  border-radius: 5px;

  &_pagination {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
}
</style>
